<template>
  <section class="main">
    <section class="socket">
      <p class="pTitle"><router-link tag="a" to="/">首页</router-link> - 在线客服</p>
      <div class="from" >
        <div class="getBox" id="getBox">
          <ul id="getBoxUl">
            <li v-for="item in listDate">
              <p class="time" v-if="item.admin_id==0">自己<span>{{item.created_at}}</span></p>
              <p class="time" v-if="item.admin_id==2">在线客服<span>{{item.created_at}}</span></p>
              <p class="info">{{item.msg}}</p>
            </li>
          </ul>
        </div>
        <div class="linkBox">
          <!-- <span class="icon01"></span>
          <span class="icon02"></span>
          <span class="icon03"></span> -->
        </div>
        <div class="postBox">
          <textarea @keyup.enter="postSock" v-model="postList"></textarea>
          <button @click="postSock">ENTER</button>
        </div>
      </div>
    </section>
    <section class="qqShow">
        <div class="title">
          如若网页窗口未能及时回复您的消息时，请添加下面的QQ客服，QQ一定能看到你的哦^_^
        </div>
        <div class="list">
          <ul>
            <li>
              <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=1591719878&amp;site=qq&amp;menu=yes"><span>: 1591719878</span></a>
              <img src="static/images/qq2.jpg">
            </li>
            <li>
              <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=1002622493&amp;site=qq&amp;menu=yes"><span>: 1002622493</span></a>
              <img src="static/images/qq3.jpg">
            </li>
          </ul>
        </div>
    </section>
  </section>
</template>
<script>
import axios from 'axios'
import {Get,Post} from '@/config/api.js'
export default {
  name: 'order',
  data() {
    return {
      loadStart: false,
      start:1,
      aa:'',
      getList:[],
      userId:'',
      postList:'',
      listDate:'',
      date: []
    }
  },
  mounted() {
    this.getId()//获取用户id
    this.getAllSock()//用户所以记录
    this.mkSet()//定时获取记录
  },
  beforeDestroy(){
    this.clSet()
  },
  methods: {
    mkSet(){
        let that=this
        this.aa=setInterval(function(){
          that.getSock()
        },2000)
    },
    clSet(){
        clearInterval(this.aa)
    },
    //请求数据
    async getSock() {
      this.start++
      if (this.vLogin()) {
        let reg = await Get('/message/'+this.userId,this.$store.state.token)
        if(reg.data!=null){
          this.listDate.push(reg.data)
          //document.getElementById("getBox").scrollTop=document.getElementById("getBoxUl").offsetHeight;
        }
      }
    },
    //聊天记录
    async getAllSock() {
      if (this.vLogin()) {
        let reg = await Get('/message/me?_sort=-id',this.$store.state.token)
        this.listDate=reg.data.reverse()
        //document.getElementById("getBox").scrollTop(200);
      }
    },
    //获取个人id
    async getId(){
      if (this.vLogin()) {
        let reg = await Get('/users/me',this.$store.state.token)
        this.userId=reg.data.id
      }
    },
    //发送数据
    async postSock(){
      if (this.vLogin()) {
        let data={
          "msg":this.postList
        }
        let reg = await Post('/message/send',this.$store.state.token,data)
        this.postList=''
        this.getAllSock()
      }
    }
  }
}

</script>
